<template>
  <view class="order-layout">
    <view class="tabbar">
      <navTab ref="navTab" :tab-title="tabs" @changeTab="changeTab"></navTab>
    </view>
    <view class="list-wrap">
      <List ref="list" :fetch-data="fetchFun" :fixed="false" :page-size="10" :auto="false">
        <slot :list="list"></slot>
      </List>
    </view>
  </view>
</template>

<script>
import OrderList from "./OrderList.vue";
import List from "../../../components/public/List/index.vue";
import navTab from "../../../components/public/Tab/navTab.vue";
import { mapActions } from "vuex";
import { orderStatus } from "../../../config/status";
import { EMIT_TYPE } from "../../../config/consts";
export default {
  components: {
    OrderList,
    List,
    navTab
  },
  props: {
    initData: {
      type: Object,
      default() {
        return null;
      }
    },
    fetchData: {
      type: Function,
      default: () => {}
    },
    tabs: {
      type: Array,
      default() {
        return orderStatus.map(v => {
          return { value: v.status, label: v.label };
        });
      }
    },
    initStatus: {
      type: Number,
      default() {
        return 2;
      }
    }
  },
  data() {
    return {
      searchParams: {
        // page: 1,
        // pageSize: 10,
        startTime: "",
        endTime: "",
        status: this.initStatus
      },
      list: [],
      finished: false,
      loading: true,
      total: null
    };
  },
  watch: {
    list() {
      this.$emit("change", this.list);
    }
  },
  created() {
    // 初始化日期
    this.searchParams.startTime = this.$day()
      .subtract(1, "years")
      .format("YYYY-MM-DD");
    this.searchParams.endTime = this.$day().format("YYYY-MM-DD HH:mm:ss");
    uni.$on(EMIT_TYPE.UPDATE_ORDER_LIST, ({ orderId }) => {
      let index = this.list.findIndex(v => v.id == orderId);
      if (index > -1) this.list.splice(index, 1);
    });
  },
  methods: {
    // 初始化数据
    init(params = {}) {
      let status = params.status || this.searchParams.status;
      for (let key in params) {
        this.searchParams[key] = params[key];
      }
      let index = this.tabs.findIndex(v => v.value == status);
      if (index != -1) {
        this.$refs.navTab.longClick(index);
      }
      this.search();
    },
    changeTab(i, t) {
      console.log(i, t);
      if (!t) return;
      this.searchParams.status = t.value;
      this.list = [];
      this.search();
    },
    search() {
      // this.$emit("change", this.list);
      this.$refs.list.reset();
    },
    handleChangeDate(item) {
      this.searchParams.startTime = item.startTime;
      this.searchParams.endTime = item.endTime;
      this.search();
    },
    async fetchFun(params, refreshing) {
      console.log("refreshing", refreshing);
      let Search = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key] || this.searchParams[key] === 0)
          Search[key] = this.searchParams[key];
      }
      let query = Object.assign({}, params, Search);
      try {
        let res = await this.fetchData(query);
        if (refreshing) this.list = [];
        this.list = this.list.concat(res.rows);
        return res;
      } catch (error) {
        return Promise.reject();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.order-layout {
  // box-sizing: border-box;
  // padding: 20rpx 20rpx 0 20rpx;
  height: 100%;
  .tabbar {
    background-color: #ffffff;
    color: $uni-text-color;
    top: -1px;
  }
  .list-wrap {
    padding: 0 10rpx;
    box-sizing: border-box;
    height: calc(100% - 60rpx);
  }
}
</style>